<template>
    <section 
        v-loading="listLoading"
        element-loading-text="亲，列表正在为您拼命加载中！！！"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)">
        <el-table
            :data="clusListData"
            style="width: 100%;margin-top: 20px;">
            <el-table-column prop="carNumber" label="车牌号" width="120"></el-table-column>
            <el-table-column prop="styleName" label="车型" width="500"></el-table-column>
            <el-table-column prop="addDate" label="上牌日期"></el-table-column>
            <el-table-column prop="distance" label="里程"></el-table-column>
            <el-table-column prop="cityName" label="城市名称"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column prop="userName" label="用户名"></el-table-column>
            <el-table-column prop="phone" label="手机号码"></el-table-column>
        </el-table>
        <el-col :span="24">
            <el-pagination 
                layout="prev, pager, next" 
                @current-change="handleCurrentChange" 
                :page-size="20" 
                :total="total" 
                style="margin-top: 20px;float: right;">
            </el-pagination>
        </el-col>
    </section>
</template>

<script>

    import util from '../../common/js/util'

    import { getClusList } from '../../api/api';

    export default {
        data() {
            return {

                listLoading: false,//是否加载等待动画

				total: 1,          //总页数
				page: 1,           //当前页数
                pageSize:20,       //每页显示的条数
                
                tableData: [
                    {
                        carNumber: '粤AH420A',
                        styleName: '奥迪什么2018款1.4L什么什么的',
                        addDate: '2016-05-02',
                        distance: '10',
                        cityName: '广州',
                        createTime: '2016-05-02',
                        userName: '啊啊啊恩',
                        phone: '18000000000'
                    }, {
                        carNumber: '粤AH420A',
                        styleName: '奥迪什么2018款1.4L什么什么的',
                        addDate: '2016-05-02',
                        distance: '10',
                        cityName: '广州',
                        createTime: '2016-05-02',
                        userName: '啊啊啊恩',
                        phone: '18000000000'
                    }, {
                        carNumber: '粤AH420A',
                        styleName: '奥迪什么2018款1.4L什么什么的',
                        addDate: '2016-05-02',
                        distance: '10',
                        cityName: '广州',
                        createTime: '2016-05-02',
                        userName: '啊啊啊恩',
                        phone: '18000000000'
                    }, {
                        carNumber: '粤AH420A',
                        styleName: '奥迪什么2018款1.4L什么什么的',
                        addDate: '2016-05-02',
                        distance: '10',
                        cityName: '广州',
                        createTime: '2016-05-02',
                        userName: '啊啊啊恩',
                        phone: '18000000000'
                    }
                ],
                clusListData: [],
            }
        },
        methods: {
            //分页组件的handle事件
			handleCurrentChange(val) {
                this.page = val
                const postData = {'pageNum': this.page, 'pageSize': this.pageSize}
                getClusList(postData).then((res) => {
                    this.listLoading = true;
                    if(res.data.code == '1000'){
                        console.log(res.data.data.list)
                        this.clusListData = res.data.data.list
                        this.total = res.data.data.totalCount
                        this.pageSize = res.data.data.pageSize
                        this.listLoading = false
                    }
                })
            },
            
        },
        mounted() {
            const postData = {'pageNum': this.page, 'pageSize': this.pageSize}
            getClusList(postData).then((res) => {
                this.listLoading = true
                if(res.data.code == '1000'){
                    console.log(res.data.data.list)
                    this.clusListData = res.data.data.list
                    this.total = res.data.data.totalCount
                    this.pageSize = res.data.data.pageSize
                    this.listLoading = false
                }
            })
        }
    }
</script>

<style scoped>

</style>


